<template>
  <div class="chat-view">
    <el-header class="view-header">
      <h2>聊天</h2>
    </el-header>
    <el-scrollbar class="view-content">
      <div
        v-for="user in users"
        :key="user.id"
        class="chat-item"
        @click="handleClick(user)"
      >
        <el-avatar :size="40" :src="user.avatar" />
        <div class="chat-info">
          <div class="chat-name">{{ user.name }}</div>
          <div class="chat-preview">{{ user.lastMsg }}</div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup>
const emit = defineEmits(['open-chat'])

const users = Array.from({ length: 20 }, (_, i) => ({
  id: i + 1,
  name: `用户 ${i + 1}`,
  avatar: `https://picsum.photos/40/40?random=${i + 1}`,
  lastMsg: '最后一条消息预览...'
}))

const handleClick = (user) => {
  emit('open-chat', user)
}
</script>

<style lang="scss" scoped>
.chat-view {
  height: 100%;
  display: flex;
  flex-direction: column;

  .view-header {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }

  .view-content {
    flex: 1;
    padding: 10px;
  }

  .chat-item {
    display: flex;
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.3s;

    &:hover {
      background-color: #f5f5f5;
    }

    .chat-info {
      margin-left: 10px;

      .chat-name {
        font-weight: bold;
      }

      .chat-preview {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>
